import React, { useEffect, useState } from "react";
import http from "../../api/axiosapi";
import { InfiniteScroll, List } from "antd-mobile";

import Tupian from "../../components/Tupian";
import { useNavigate } from "react-router-dom";
function Index() {
  const [data, setData] = useState([]);
  const [page, setPage] = useState(1);
  const [hasMore, setHasMore] = useState(true);
  const [pageSize, setPageSize] = useState(10);
  const getdata = async () => {
    const params: {
      page: number;
      pageSize: number;
    } = { page, pageSize };
    const res = await http.get("/api/article/list", { params });
    console.log(res);
    const { rows } = res.data;
    setData([...data, ...rows]);
    setPage(page + 1);
    if (rows.length == 0) {
      setHasMore(false);
    }
  };
  useEffect(() => {
    getdata();
  }, []);
  const navget=useNavigate()
  const toxiangq=(id)=>{
    navget(`/xiangq/${id}`)
  }
  return (
    <div>
      <div style={{ overflow: "auto", height: "500px" }}>
        {data.map((item, index) => (
          <dl
            key={index}
            style={{
               color:'var(--color-txt)',
              display: "flex",
              justifyContent: "space-between",
              alignItems: "center",
              borderBottom: "1px solid #eee",
            }}
            onClick={()=>toxiangq(item.id)}
          >
            <dt>
              <p>
                <b>
                  <span>{item.title}</span>
                </b>
              </p>
              <p>
                <span>{item.content}</span>
              </p>
              <span>发布时间:{item.updatedAt}</span>{" "}
              <span>浏览量：{item.viewCount}</span>
            </dt>
            <dd>
             <Tupian></Tupian>
            </dd>
          </dl>
        ))}
        <InfiniteScroll loadMore={getdata} hasMore={hasMore} />
      </div>
    </div>
  );
}

export default Index;
